<template>
  <div class="survey bg">
	  <goback title="秸秆未来"></goback>


    <swiper class="swiper card" ref="mySwiper" :options="swiperOption" @slideChange="onSlideChange">
      <swiper-slide class="swiper_slide" v-for="(question, index) in getQuestions" :key="index">
        <h2 class="card_title">
			<div>{{ number[index] }}</div>
			<div>{{index+1}}/5</div>
		</h2>
		
          <div class="prompt">{{ question.questionTitle }}</div>
		  

		  
          <div>
            <div class="option" :class="{'correct': question.isCorrect,'incorrect':  !question.isCorrect && question.showFeedback}">
              <input id="A" type="radio" :disabled="question.showFeedback" @click="checkAnswer(index,'A')"/>
              <label for="A">{{question.questionA}}</label>
            </div>
          </div>
		  
		  <div>
		    <div class="option" :class="{'correct': question.isCorrect,'incorrect':  !question.isCorrect && question.showFeedback}">
		      <input id="B"type="radio" :disabled="question.showFeedback" @click="checkAnswer(index,'B')"/>
		      <label for="B">{{question.questionB}}</label>
		    </div>
		  </div>
		  
		  <div>
		    <div class="option" :class="{'correct': question.isCorrect,'incorrect':  !question.isCorrect && question.showFeedback}" >
		      <input id="C" type="radio" :disabled="question.showFeedback" @click="checkAnswer(index,'C')"/>
		      <label for="C">{{question.questionC}}</label>
		    </div>
		  </div>
		  
		  <div>
		    <div class="option" :class="{'correct': question.isCorrect,'incorrect':  !question.isCorrect && question.showFeedback}" >
		      <input id="D" type="radio" :disabled="question.showFeedback" @click="checkAnswer(index,'D')"/>
		      <label for="D">{{question.questionD}}</label>
		    </div>
		  </div>
		  
		
		<div v-if="question.showFeedback" class="daan">
		  <div v-if="question.isCorrect" class="true">答案正确！</div>
		  <div v-else class="false">
			  答案错误
			  <div style="color: green;">正确答案是:{{ question.questionYes }}</div>
			  <div style="color: green;">解析:{{ question.questionExplain }}</div>
		  </div>

		</div>
		
      </swiper-slide>
	  
	  
	  
    </swiper>
	  <div v-if="this.getQuestions.length > 0">  
	      <!-- 如果不是最后一个问题，显示“下一个”按钮 -->  
	      <button v-if="active <4" @click="nextSlide" class="next">下一个</button>  
	      <!-- 如果是最后一个问题，显示“完成”按钮 -->  
	      <button v-else @click="submit" class="next">完成</button>  
	    </div>  
    

  </div>
</template>

<script>
	export default {
		data() {
			return {
				swiperOption: {
					slidesPerView: 1
				},
				active:0,
				number:['问题一','问题二','问题三','问题四','问题五'],
				questionIDs: ['A','B','C','D'],
				Correct_nums: 0,
				getQuestions:[],
				results: []
			};
		},
		 mounted() {
			this.getData();
		  },
		  computed: {
		  
		  },
		  methods: {
			  getData() {
			  	this.axios.get(`${this.IP}/get_random_questions`, {
			  		params: {
			  			token: this.getStorage("token"),
			  		}
			  	}).then(res => {
					
					
					if(res.data.includes("请明日再来答题!")){
						this.$toast.showMessage(res.data);
						this.$router.go(-1);
					}else{
						this.getQuestions = res.data;
						this.getQuestions.forEach((e)=>{
							e.showFeedback=false;
							e.isCorrect=false;
						})
						this.$forceUpdate();;
					}
					

			  	}).catch(error => {
			  		// 处理错误  
			  		console.error('请求出错：', error);
			  	});;
			  },
			  onSlideChange() {
			  	this.active = this.$refs.mySwiper.swiperInstance.activeIndex;
			  	console.log(this.active);
			  },
		    nextSlide() {
		      const swiper = this.$refs.mySwiper.swiperInstance;
		      if (swiper && swiper.slideNext) {
		        swiper.slideNext();
				this.active=this.$refs.mySwiper.swiperInstance.activeIndex;
		      } else {
		        console.error('Swiper 实例未正确初始化或方法不存在');
		      }
		    },
			checkAnswer(index, answer) {
				
				
				if(this.getQuestions[index].questionYes.includes(answer)){
					this.getQuestions[index].isCorrect=true;
					this.getQuestions[index].showFeedback=true;
					this.results.push('Y');
				}else{
					this.getQuestions[index].isCorrect=false;
					this.getQuestions[index].showFeedback=true;
					this.results.push('N');
				}
				this.$forceUpdate();
		    },
			submit(){
				this.axios.post(`${this.IP}/get_submit_questions`, {
						token: this.getStorage("token"),
						results: this.results
				}).then(res => {
					this.$toast.showMessage(res.data);
					this.$router.go(-1);
				}).catch(error => {
					// 处理错误  
					console.error('请求出错：', error);
				});;
			},
		  }
		
		
	};
</script>

<style scoped>
	.top {
		background: linear-gradient(to bottom, #2fb55a, #ffffff);
		;
		height: 20vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.top-text {
		color: white;
		font-size: 5vw;
	}


	h2 {
		margin:3vw;
		font-size: 4vw;
		margin-bottom: 2vw;		
	}

	.prompt {
		margin: 3vw;
		font-size: 32px;
	}

	.option {
		margin-top: 5vw;
		margin-left: 5vw;

	}

	.correct {
		color: green;
	}

	.incorrect {
		color: red;
	}

	.option input {
		margin-right: 2vw;
		margin-top: 1vw;
	}

	.true {
		color: green;
		z-index: 100;
	}

	.false {
		color: red;
		z-index: 100;
	}

	.next {
		width: 50%;
		height: 10vw;
		border-radius: 4vw;
		border: none;
		background: linear-gradient(to right, #ffcf0e, #ff8002);
		color: white;
		font-size: 5vw;
		display: block;
		margin: 10vw auto !important;
	}
	
	
	.swiper{
		margin-top: 2vh;
		width: 82vw;
		height: 70vh;
	}
	.swiper_slide{
		width: 100%;
		height: 100%;
		position: relative;
	}
	.daan{
		position: absolute;
		bottom: 8vw;
		margin: 5vw;
	}
	.daan p{
		font-size: 28px;
	}
	.radio_true{
		color: #2fb55a;
	}
	.radio_false{
		color: #ff1111;
	}
	.card_title{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.card_title div:nth-child(2){
		color: #8e8e8e;
	}
</style>
